doctype html
html
  head
    meta(charset="utf-8")
    title #{t("login:title")} — Superpowers
    link(rel="stylesheet",href="/styles/reset.css")
    link(rel="stylesheet",href="/styles/properties.css")
    link(rel="stylesheet",href="/login/index.css")

  body
    .server-header
      img.server-icon(src="/images/icon.png")
      .server-name= t("common:states.connecting")
    .connecting
      p= t("common:states.connecting")
    form.login(method="post",hidden)
      .welcome= t("login:welcome")
    
      table.properties
        tr
          th= t("login:username")
          td
            // NOTE: The pattern and min/max lengths must match the regex in server/passportMiddleware.ts
            input.username(type="text",name="username",placeholder="Your username",spellcheck="false",minlength="3",maxlength="20",pattern="[A-Za-z0-9_-]+",title=t("login:usernamePatternDescription"),autofocus)

      .buttons
        button.log-in= t("login:logIn")

    a(href="http://superpowers-html5.com/",target="_blank").server-footer
      | Superpowers — HTML5 2D+3D game maker

    script.
      if (window.navigator.userAgent.indexOf("Electron") !== -1) {
        document.body.querySelector(".server-header") .hidden = true;
        document.body.querySelector(".server-footer") .hidden = true;
      }
    script(src="/SupCore.js")
    script(src="/SupClient.js")
    script(src="/login/index.js")
